﻿
@{
    Layout = "";
}
<style>
    .my-drop-zone {
        border: dotted 3px lightgray;
    }

    .nv-file-over {
        border: dotted 3px red;
    }

    /* Default class applied to drop zones on over */

    .another-file-over-class {
        border: dotted 3px green;
    }

    html, body {
        height: 100%;
    }

    canvas {
        -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
        -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
        background-color: #f3f3f3;
        border: 1px solid #c3c3c3;
        box-shadow: 3px 3px 3px 0 #e3e3e3;
        height: 100px;
        margin: 6px 0 0 6px;
    }

    .ngdialog.ngdialog-theme-plain .ngdialog-content {
        width: 55% !important;
    }
</style>
<div ng-controller="SpecialTopicEditController">
    <div class="container-fluid" ng-show="!selectProduct">
        <div class="row">
            <div class="col-md-12">
                <form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
                    <!-- START panel-->
                    <div class="panel panel-default" ng-class="{ 'whirl standard': isLoading }">
                        <div class="panel-body">
                            <fieldset class="b0">
                                <legend>{{Activity.Id == 0 || Activity.Id == null ? '添加活动' : '修改活动'}}</legend>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">请选择抽奖活动</label>
                                    <div class="col-sm-4">
                                        <select class="form-control" ng-model="Activity.LuckDrawID" ng-options="c.Id as c.DrawName for c in CategoryList"></select>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">活动标题</label>
                                    <div class="col-sm-4">
                                        <input type="text" required="" ng-model="Activity.ActivityName" class="form-control" name="ActivityName" maxlength="50" />
                                        <span ng-show="validateInput('ActivityName', 'required')" class="text-danger">请输入活动标题</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">开始时间</label>
                                    <div class="col-sm-4">
                                        <p class="input-group">
                                            <input style="z-index: 0;" name="StartTime" required="" type="text" class="form-control" datetime-picker="yyyy-MM-dd HH:mm:ss" ng-model="Activity.StartTime"
                                                   is-open="picker1.open" datepicker-options="datepickerOptions" />
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default" ng-click="openCalendar($event, 'picker1')" ng-disabled="Activity.ActivityStatus=='进行中'||Activity.ActivityStatus=='已结束'"><i class="fa fa-calendar"></i></button>
                                            </span>
                                        </p>
                                        <span ng-show="validateInput('StartTime', 'required')" class="text-danger">请输入开始时间</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">结束时间</label>
                                    <div class="col-sm-4">
                                        <p class="input-group">
                                            <input style="z-index: 0;" name="EndTime" required="" type="text" class="form-control" datetime-picker="yyyy-MM-dd HH:mm:ss" ng-model="Activity.EndTime"
                                                   is-open="picker2.open" datepicker-options="datepickerOptions" />
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default" ng-click="openCalendar($event, 'picker2')" ng-disabled="Activity.ActivityStatus=='已结束'"><i class="fa fa-calendar"></i></button>
                                            </span>
                                        </p>
                                        <span ng-show="validateInput('EndTime', 'required')" class="text-danger">请输入结束时间</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">团持续时间（小时）</label>
                                    <div class="col-sm-4">
                                        <input type="number" min="0" max="9999999" name="ContinuedTime" required="" ng-model="Activity.ContinuedTime" class="form-control" maxlength="20" />
                                        <span ng-show="validateInput('ContinuedTime', 'required')" class="text-danger">请输入团持续时间（小时）</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">活动价格</label>
                                    <div class="col-sm-4">
                                        <input type="number" min="0" max="9999999" name="ActivityPrice" required="" ng-model="Activity.ActivityPrice" class="form-control" maxlength="20" />
                                        <span ng-show="validateInput('ActivityPrice', 'required')" class="text-danger">请输入活动价格</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">参与人数</label>
                                    <div class="col-sm-4">
                                        <input type="number" min="0" max="9999999" name="PeopleNum" required="" ng-model="Activity.PeopleNum" class="form-control" maxlength="20" />
                                        <span ng-show="validateInput('PeopleNum', 'required')" class="text-danger">请输入参与人数</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">每个人可开团次数</label>
                                    <div class="col-sm-4">
                                        <input type="number" min="1" max="9999999" name="OpenTeamNum" required="" ng-model="Activity.OpenTeamNum" class="form-control" maxlength="20" />
                                        <span ng-show="validateInput('OpenTeamNum', 'required')" class="text-danger">请输入每个人可开团次数</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">每个人可参团次数</label>
                                    <div class="col-sm-4">
                                        <input type="number" min="1" max="9999999" name="ParticipateNum" required="" ng-model="Activity.ParticipateNum" class="form-control" maxlength="20" />
                                        <span ng-show="validateInput('ParticipateNum', 'required')" class="text-danger">请输入每个人可参团次数</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">专题海报</label>
                                    <div class="col-sm-3">
                                        <div class="imgcrop-preview" uploader="uploader">
                                            <img ng-src="{{myCroppedImage}}" style="max-width: 100%; max-height: 100%" onerror="javascript: this.src =  '/Content/img/default.png';" />
                                            <input id="fileInput" type="file" style="display: none;" nv-file-select="" uploader="uploader" />
                                        </div>
                                        <div>
                                            <div style="" class="progress progress-xs" ng-show="uploading">
                                                <div role="progressbar" ng-style="{ 'width': uploader.progress + '%' }" class="progress-bar"></div>
                                            </div>
                                        </div>
                                        <span ng-show="IsCheckedPic" class="text-danger">请选择图片</span>
                                    </div>
                                    <div class="col-sm-2">
                                        <button type="button" class="mb-sm btn btn-info" ng-click="selectImage()">
                                            图片选择
                                        </button>
                                        <span class="text-danger">建议上传1：1的海报图</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">团长是否必中</label>
                                    <div class="col-sm-4">
                                        <label class="switch switch-lg">
                                            <input type="checkbox" ng-model="Activity.IsWinning">
                                            <span></span>
                                        </label>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">活动详情</label>
                                    <div class="col-sm-4">
                                        <input type="text" required="" ng-model="Activity.ActivityDetails" class="form-control" name="ActivityDetails" maxlength="500" />
                                        <span ng-show="validateInput('ActivityDetails', 'required')" class="text-danger">请输入活动详情</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="panel-footer text-right">
                            <button type="button" class="btn btn-warning" ng-click="cancel()">返回列表</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                    <!-- END panel-->
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    App.controller('SpecialTopicEditController', [
        "$scope", "$state", "$http", "$stateParams", "Notify", "FileUploader", "ngDialog", 'ngTableParams', 'ngTableDataService', '$rootScope', '$filter',
        function ($scope, $state, $http, $stateParams, Notify, FileUploader, ngDialog, ngTableParams, ngTableDataService, $rootScope, $filter) {
            'use strict';

            $scope.submitted = false;
            $scope.IsCheckedPic = false;
            $scope.Activity = {};
            $scope.Activity.LuckDrawID = 0;
            $scope.CategoryList = [];
            $scope.validateInput = function (name, type) {
                var input = $scope.formValidate[name];
                return (input.$dirty || $scope.submitted) && input.$error[type];
            };

            // 日期插件
            $scope.picker1 = {
                date: new Date()
            };

            $scope.picker2 = {
                date: new Date()
            };

            $scope.datepickerOptions = {
                showWeeks: false,
                startingDay: 1,
                dateDisabled: function (data) {
                    //return (data.mode === 'day' && (new Date().toDateString() == data.date.toDateString()));
                }
            }

            $scope.openCalendar = function (e, picker) {
                $scope[picker].open = true;
            };


            $http.post("/Activity/GetDrawListAll").then(function (response) {
                debugger;
                $scope.CategoryList = response.data.data;

            });

            //数据初始化
            if ($stateParams.id && $stateParams.id > 0) {
                $scope.isLoading = true;
                $http.post("/Activity/ActivityEdit", { id: $stateParams.id }).then(function (response) {
                    debugger;
                    if (response.data.Result && response.data.Result != "") {
                        $scope.Activity = response.data.Result;
                        if (response.data.Result.CoverImg && response.data.Result.CoverImg != '') {
                            $scope.myCroppedImage = $rootScope.ImgHostUrl + angular.copy(response.data.Result.CoverImg);
                        }
                    }
                    $scope.isLoading = false;
                });
            }

            // 提交
            $scope.submitForm = function () {
                debugger;
                $scope.isLoading = true;
                $scope.submitted = true;
                if ($scope.formValidate.$valid) {
                    if (!$scope.Activity.CoverImg || $scope.Activity.CoverImg == "") {
                        $scope.IsCheckedPic = true;
                        $scope.isLoading = false;
                        return false;
                    }
                    if ($scope.Activity.StartTime > $scope.Activity.EndTime) {
                        Notify.alert('活动开始时间不能大于结束时间!', { status: 'warning', timeout: 1000 });
                        $scope.isLoading = false;
                        return false;
                    }
                    if ($scope.Activity.LuckDrawID == 0) {
                        Notify.alert('请选择抽奖活动!', { status: 'warning', timeout: 1000 });
                        $scope.isLoading = false;
                        return false;
                    }
                    $http.post("/Activity/SaveActivity", $scope.Activity).then(function (returnData) {
                        if (returnData.data.isSuccess) {
                            Notify.alert('操作成功!', { status: 'success', timeout: 1000 });
                            $state.go("app.activityList");
                        } else {
                            Notify.alert(returnData.data.msg, { status: 'warning', timeout: 1000 });
                        }
                        $scope.isLoading = false;
                    });
                } else {
                    $scope.isLoading = false;
                    return false;
                }
            };

            //返回列表
            $scope.cancel = function () {
                $state.go("app.activityList");
            };

            //-------------图片选择相关
            $scope.selectImage = function () {
                $("#fileInput").click();
            }

            var handleFileSelect = function (evt) {
                var file = $scope.uploadSelectFile = evt.currentTarget.files[0];
                if (!evt.currentTarget.files[0] || ! /image\/\w+/.test(evt.currentTarget.files[0].type)) {
                    Notify.alert('请选择图像文件', { status: 'warning' });
                    return false;
                }
                if (file.size > 1 * 1024 * 1024) {
                    Notify.alert('图片大小不能大于1MB', { status: 'warning', timeout: 3000 });
                    $scope.uploadSelectFile = null;
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function (evt) {
                    $scope.$apply(function ($scope) {
                        $scope.myCroppedImage = evt.target.result;
                    });
                };
                if (file)
                    reader.readAsDataURL(file);
            };

            angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
            var uploader = $scope.uploader = new FileUploader({
                url: $rootScope.ImgUploadUrl + '?PlatForm=wsd&Path=SpecialTopic'
            });
            uploader.filters.push({
                name: 'customFilter',
                fn: function (item /*{File|FileLikeObject}*/, options) {
                    return this.queue.length < 10;
                }
            });

            // CALLBACKS

            uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
                //  console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function (fileItem) {
                if ($scope.uploadSelectFile && /image\/\w+/.test($scope.uploadSelectFile.type)) {
                    $scope.uploading = true;
                    fileItem.upload();
                }
                //    console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function (addedFileItems) {
                //   console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function (item) {
                // console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function (fileItem, progress) {
                // console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function (progress) {
                //  console.info('onProgressAll', progress);
            };
            uploader.onSuccessItem = function (fileItem, response, status, headers) {

                $scope.Activity.CoverImg = response[0];

                $("#fileInput").val("");
                //  console.info('onSuccessItem', fileItem, response, status, headers);
            };
            uploader.onErrorItem = function (fileItem, response, status, headers) {
                //  console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function (fileItem, response, status, headers) {
                // console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function (fileItem, response, status, headers) {
                //  console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function () {
                $scope.uploading = false;
            };

        }
    ]);
</script>